<!doctype html>
<html ng-app="myapp">
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="/frame/bootstrap-3.3.4/css/bootstrap.css">
		<script src="/frame/angular_js/angular.js"></script>
		<script src="/frame/ui-bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
		<script src="app.js"></script>
	</head>
	<body>
		<br>
		<hr>
		<div class="container">
			<div class="row">
				<div class="col-md-6 ">
					<!--官网示例代码开始-->		
					<div ng-controller="AccordionDemoCtrl">
						<!--两个按钮-->		
						<p>
							<button class="btn btn-default btn-sm" ng-click="status.open = !status.open">开关最后面板</button>
							<button class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable第一面板</button>
						</p>
						<!--选择框-->		
						<div class="checkbox">
							<label>
								<input type="checkbox" ng-model="oneAtATime">同一时间只能开启一个面板</label>
						</div>
						<!--手风琴指令-->		
						<accordion close-others="oneAtATime">
							<!--面板1-->		
							<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">This content is straight in the template.</accordion-group>

							<!--面板2，3-->		
							<accordion-group heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</accordion-group>

							<!--面板4-->		
							<accordion-group heading="Dynamic Body Content">
								<p>The body of the accordion group grows to fit the contents</p>
								<button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
								<div ng-repeat="item in items">{{item}}</div>
							</accordion-group>

							<!--面板5-->		
							<accordion-group is-open="status.open">
								<accordion-heading>
									I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
								</accordion-heading>
								This is just some content to illustrate fancy headings.
							</accordion-group>
						</accordion>
					</div>
					<!--官网示例代码结束-->		
				</div>
				<!--说明-->
				<div class="col-md-6">
					<h1>说明</h1>
					<p>为了可以打开一个面板时，关闭其他面板我们用<code>close-others</code>属性。</p>
				</div>
			</div>
		</div>
		
		
	</body>
</html>